<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<title>index_0223_01</title>
	</head>
	<body>
		<div id="app1">
			{{message}} {{name}}
			<p v-bind:class="myp">hello</p>
			<div v-html="link"></div>
			<p v-once>{{name}}</p>
			<p>{{num/num2}}</p>
			<p>{{isSuccess?'成功':'失败'}}</p>
			<p>{{abc.split('').reverse().join('-') + num2}}</p>
			<p v-if="isSuccess">看得见吗</p>
			<div @click="click1">
				<div @click.stop="click2">事件冒泡</div>
			</div>
			
			<div :class="active">bind属性</div>
			<div :class="isActive?'red':''">bind属性</div>
			<div :class="{red:isRed, green:isGreen}">bind属性</div>
			<div :class="['red',active, isGreen?'green':'']">bind属性1</div>
			
			<div :style="{fontSize:fontS,fontStyle:'italic',textDecoration:isUnderline?'underline':'overline'}">style用法</div>
			
			<div v-if="n === 1">1</div>
			<div v-else-if="n === 2">2</div>
			<div v-else-if="n === 3">3</div>
			<div v-else>ohter</div>
			<div v-show="isShow">kanbujian</div>
			
			<template v-if="showDayInfo">
			<span>2020年02月23日</span>
			<span>2020年02月24日</span>
			<span>2020年02月24日</span>
			<span>2020年02月24日</span>
			<span>2020年02月24日</span>
			</template>
			
			<div v-for="user,index in users" :key="user.id" >
				<p v-if="user.age > 50">{{index+1}}、{{user.name}}是{{user.age}}岁</p>
			</div>
			
			<div v-for="item,key in car" :key="key" >
				{{key}}->{{item}}
			</div>
			
			<button @click="num=num*5">点击</button>
			<div>{{num}}</div>
			
			<div @click="showClick('gss', $event)">绑定事件</div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: '#app1',
				data: {
					message: 'gss',
					name: '123',
					link: '<a href="http://www.baidu.com">baidu</a>',
					num: 100,
					num2: 5,
					isSuccess: false,
					abc: 'qiyang',
					myp: 'myp_class',
					active: 'active',
					isActive: true,
					isRed: true,
					isGreen: false,
					fontS: '36px',
					isUnderline: true,
					n: 8,
					isShow: true,
					showDayInfo: false,
					users: [
						{id:9093283939, name: '王红', age: 10},
						{id:9029823829, name: '张丽', age: 40},
						{id:9283203902, name: '杨明', age: 60}
					],
					car: {
						color: 'red',
						len: 2.8,
						wt: '5t'
					}
				},
				beforeCreate: function() {
					console.log('vue实例形成之后，观察数据变化执行之前和配置事件调用之前')
				},
				created:function(){
					console.log('vue实例形成之后，观察数据变化执行之后和配置事件调用之后，实例挂载阶段之前（实例挂载阶段还没开始）')
				},
				beforeMount:function(){
					console.log('进入实例挂载阶段，渲染事件首次被调用时')
				},
				mounted:function(){
					console.log('实例挂载时，渲染页面完成之前，执行')
				},
				beforeUpdate:function(){
					console.log('数据变化之前执行')
				},
				updated() {
					console.log('数据变化之后执行')
				},
				methods:{
					click1:function(){
						console.log('点击了外层div')
					},
					click2:function(){
						console.log('点击了内层div')
					},
					showClick:function(m, abc){
						alert(m)
						console.log(abc)
					}
				}
				
			})
			app.$data.name = 'qiyang'
			
			
		</script>
		<style>
			.myp_class{font-size: 20px;color:red;}
			.active{color:red;}
			.red{background: red;}
			.green{color:green;}
		</style>
	</body>
</html>
